<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	  xmlns:permission="http://111.67.194.242/permission"
	  layout:decorate="frame/rightBarFrame">
<head>

	<!-- 这里可以引入该页面css文件 -->
	<meta name="active" th:content="${info.attrs.get('active')}">
	<meta name="platform" th:content="${info.platform}">
	<meta name="director" th:content="${info.attrs.get('director') eq ''?'未知':info.attrs.get('director')}">
	<meta name="desc" th:content="${info.desc}">
	<meta name="vname" th:content="${info.name}">
	<meta name="cover" th:content="${ (info.attrs.get('cover') == null or info.attrs.get('cover') eq '') ? config.get('cover'):info.attrs.get('cover')}">
	<link rel="stylesheet" type="text/css" href="/css/play_new.css">
	<title th:text="${info.name == null}?'': ${info.name} + '--正在播放'">播放</title>
	<script src="/js/hash.js"></script>
	<script src="/frame/js/broadcast.js"></script>
</head>
<body>
<div >
	<div layout:fragment="content" >
		<form id="formData" action="/player" method="get" style="display: none;" target="player">
			<input name="url" type="text">
			<input name="parser" type="text" value="">
			<input name="platform" type="text" th:value="${info.platform}">
			<input name="channelId" type="text">
		</form>
		<div th:replace="frame/maskCover::maskCover"></div>

		<div id="mask_cover_box">
			<iframe style="position: absolute;border: none; width: 100%; height:100%;background-color: #000;" name="player"></iframe>
		</div>
		<div class="episode_box" toggle="false">
			<div class="toggle_btn_box">
				<div class="mh toggle_btn">
					<i class="fa fa-chevron-left icon_btn" style="line-height: 100px;transform: rotate(-180deg); transform-origin: 50% 50%;"></i>
				</div>
			</div>

			<div class="mh episode_content_box">
				<ul class="videoInfos">
					<li th:each="videoInfo:${info.videoInfos}" th:attr="title=${videoInfo.desc},url=${videoInfo.url},platform=${videoInfo.platform}" th:classappend="${videoInfo.displayMode==1}?'':'block'">
						<a th:attr="index=${videoInfo.number}" th:text="${videoInfo.displayMode == 1?videoInfo.title:videoInfo.number}" href="javascript:void(0);"></a>
					</li>
				</ul>
			</div>
		</div>
	</div>


	<div layout:fragment="toolbar">
		<a class="btn_lock" type="event" onclick="lock(this);" title="锁定"><i class="frame_jfa fa fa-lock"></i></a>
		<a permission:login type="event" title="放映室" onclick="util.redirect('/share/sharePlay' + location.search + location.hash)"><i class="frame_jfa fa fa-hdd-o"></i></a>
		<a class="exchange_parser" href="/page/parserInfo?channelId=" title="切换解析器"><i class="frame_jfa fa fa-exchange"></i></a>
		<a permission:login href="/user/history" title="历史记录"><i class="frame_jfa fa fa-book"></i></a>
	</div>

	<div layout:fragment="script">
		<script>

			var lockScreen = new LockScreen(1, $("meta[name=vname]").attr("content"), $("meta[name=director]").attr("content"), $("meta[name=desc]").attr("content"), $("meta[name=cover]").attr("content"));
			$("#mask_cover_box")[0].appendChild(lockScreen.template);
			// 暂停30s后显示锁屏
			var locker = new Locker(600, lockScreen);
			locker.addEventListener("lock", ()=> {
				$(".btn_lock i").attr("title", "解锁");
				$(".btn_lock i").attr("class", "frame_jfa fa fa-lock");
			})
			locker.addEventListener("unlock", ()=> {
				$(".btn_lock i").attr("title", "锁定");
				$(".btn_lock i").attr("class", "frame_jfa fa fa-unlock");
			})

			var video = {
				end: function (){
					var next = $(active).parent().next();
					if (next.length == 0){
						next = $(active).parents("ul").find("li").get(0);
						if ( util.isNullString(next)){
							return;
						}
					}
					next = $(next).find("a").get(0);
					Hash.hashPath("/play", {index: $(next).attr("index")});
				},
				reload: () => {
					(null == active || active.length == 0)? window.location.reload():changeActive(active);
				},
				pause: () => {
					locker.wait();
				},
				play: () => {
					locker.unlock();
				},
			}

			var parserInfo = (() => {
				var _parser_ = [( ${@thyUtil.toJson(parsers)} )];
				_parser_.shift();
				_parser_.forEach( (elem) => {elem.checked = 0} );
				return {
					info: _parser_,
					update: (name, def) => {
						console.log( name + "----- " + def)
						// 为空为未指定解析器
						if (!util.isNullString(def)) {
							_parser_.forEach( (elem) => {
								if(elem.val == def) {
									elem.checked = util.isNullString(name) ? -1 : 1
								}
							} );
							return;
						}

						var flag = false;
						for (var i = 0, l =_parser_.length; i < l; i ++) {
							if (name == _parser_[i].val) {
								flag = true;
								_parser_[i].checked = 1;
								continue;
							}
							if (!flag) {
								_parser_[i].checked = -1;
							}
						}
					},
					setParser: function(val) {
						$("input[name=parser]").val(val);
						submit( $("input[name=url]").val() );
					}
				};
			})();

			var channelId = new Date().getTime() + '' + parseInt(Math.random()*1000);
			$("#formData input[name=channelId]").val(channelId);
			$(".exchange_parser").attr("href", $(".exchange_parser").attr("href")+channelId);
			// 创建半双工广播
			var broadcastChannel = new HalfDuplexBroadcast(channelId);
			// 创建处理器
			var handler = new Handler("objectProxy", broadcastChannel);
			var proxyHandler = new ObjectProxyHandler(handler);
			// 绑定对象，供远程调用
			proxyHandler.binding("pvideo", new ObjectProxyBinding(video));
			// 绑定对象，供远程调用
			proxyHandler.binding("pparser", new ObjectProxyBinding(parserInfo));

			// 创建远程代理对象
			var proxy = new ObjectProxy("video", proxyHandler);
			// 添加代理方法
			proxy.addMethod("pause", "play");


			function lock() {
				if (locker.status() == "lock") {
					locker.unlock();
					proxy.play();
				}
				else {
					proxy.pause();
					locker.lock();
				}
			}
		</script>
		<script>

			$(".toggle_btn").click( () => {
				var w = $(".episode_box").width();
				var toggle = $(".episode_box").attr("toggle");
				if (toggle == "true") {
					$(".episode_box").removeClass("close");
					$(".episode_box").animate({right: 0});
					$(".icon_btn").rotate({angle: 0, animateTo: -180, duration: 200});
					$(".episode_box").attr("toggle", "false");
				}
				else {
					$(".episode_box").animate({right: -w + "px"}, 'normal', 'swing', () => {
						$(".episode_box").addClass("close");
					});
					$(".icon_btn").rotate({angle: -180, animateTo: 0, duration: 200});
					$(".episode_box").attr("toggle", "true");
					$(".episode_box").animate({op: -w + "px"});
				}
			});

			Hash.addListener("/play", function(e, param){
				var index = param.get("index");
				changeActive($(".videoInfos a[index="+ index +"]").get(0));
			});

			// 初始化播放器页面高度
			var active = null;
			var activeIndex = Hash.getParameter().get("index");
			// 如果url未指明Index， 由设置meta[name=active]默认
			if (!activeIndex){
				activeIndex = $("meta[name=active]").attr("content");
				// 如果meta[name=active]未指明Index，则可能是部分url有问题，设为默认第一集;
				activeIndex = util.getDefault(activeIndex, "1", true);
				// 设置
				Hash.hashPath("/play", {index: activeIndex});
			}
			else{
				// url指明的直接调用，因为在刷新时url不会变化，不会触发
				changeActive($(".videoInfos a[index="+ activeIndex +"]").get(0));
			}

			// 正在播放剧集切换
			function changeActive(target){
				console.log(target);
				if (active != null){
					$(active).removeClass("active");
				}
				$( target ).addClass("active");
				active = target;
				var p = $(target).parent();
				submit($(p).attr("url"));
				if (!util.isNullString($(p).attr("title"))){
					lockScreen.desc($(p).attr("title"));
				}
			}

			// 剧集按钮点击切换活跃状态
			$(".videoInfos").delegate("li a", "click", function(e){
				var index = $( e.currentTarget ).attr("index");
				if (Hash.getParameter().get("index") == index){
					video.reload();
					return;
				}
				Hash.hashPath("/play", {index: index});
			});


			function submit(url) {
				var form = document.getElementById("formData");
				$(form).find("input[name=url]").val(url);
				form.submit();
			}
		</script>
	</div>
</div>
</body>
</html>